<template>
  <el-dialog v-model="dialogVisible" title="添加链接">
    <!-- 绑定 tab-click 事件 -->

    <div class="auto-generate-table">
      <div class="table-header">
        <span>启动页面 <span class="required">*</span></span>
        <span>启动参数</span>
        <span>链接备注 <span class="required">*</span></span>
      </div>
      <!-- 使用 el-form 包裹 -->
      <el-form :model="autoGenerateFormList" :rules="rules" ref="formRef">
        <div v-for="(item, index) in autoGenerateFormList" :key="index" class="table-row flex gap-x-2">
          <!-- 为必填项添加 el-form-item 并关联验证规则 -->
          <el-form-item :prop="`${index}.startPage`" :rules="rules.startPage">
            <el-input v-model="item.startPage" placeholder="例如：page/person/234"></el-input>
          </el-form-item>
          <el-form-item :prop="`${index}.message`">
            <el-input v-model="item.startParam" placeholder="例如：name=jack&age=18"></el-input>
          </el-form-item>
          <el-form-item :prop="`${index}.remark`" :rules="rules.remark">
            <el-input v-model="item.remark" placeholder="请输入链接备注"></el-input>
          </el-form-item>
          <el-icon v-if="autoGenerateFormList.length > 1" @click="removeAutoGenerateRow(index)" class="delete-icon">
            <Delete />
          </el-icon>
        </div>
      </el-form>
    </div>
    <el-button @click="addAutoGenerateRow" class="w-[100%]">添加链接</el-button>

    <!-- 添加取消和确定按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { updateToolsMicroApp } from '@/api/advertisement/byte';
import { ByteVO } from '@/api/advertisement/byte/types';

enum OperateType {
  NEW = 'NEW',
  MODIFY = 'MODIFY',
  DELETE = 'DELETE'
}

const emit = defineEmits(['updateList']);

const dialogVisible = ref(false);
const autoGenerateFormList = ref([{ startPage: '', startParam: '', remark: '', operateType: OperateType.NEW }]);
// 定义表单引用
const formRef = ref(null);
const byteInfo = ref();

// 定义验证规则
const rules = reactive({
  startPage: [{ required: true, message: '启动页面为必填项', trigger: 'blur' }],
  remark: [{ required: true, message: '链接备注为必填项', trigger: 'blur' }]
});

// 打开弹窗
const openDialog = (info: ByteVO) => {
  if (info) {
    console.log('🚀 ~ openDialog ~ info:', info);
    byteInfo.value = info;
  }
  dialogVisible.value = true;
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
};

// 添加自动生成链接表单行
const addAutoGenerateRow = () => {
  autoGenerateFormList.value.push({ startPage: '', startParam: '', remark: '', operateType: OperateType.NEW });
};

// 删除自动生成链接表单行
const removeAutoGenerateRow = (index: number) => {
  autoGenerateFormList.value.splice(index, 1);
};

// 确定按钮点击事件
const handleConfirm = async () => {
  if (!formRef.value) return;
  try {
    // 触发表单验证
    await formRef.value.validate();
    updateApp();
    dialogVisible.value = false;
  } catch (error) {
    ElMessage.error('验证失败，请检查必填项');
  }
};

const updateApp = async () => {
  const { accountId, advertiserId, instanceId, appId, tagInfo } = byteInfo.value;
  try {
    const resp = await updateToolsMicroApp({
      accountId,
      advertiserId,
      instanceId,
      appId,
      tagInfo,
      appPage: [...autoGenerateFormList.value]
    });
    emit('updateList');
  } catch (error) {
    ElMessage.error('添加失败');
  }
};

defineExpose({
  openDialog,
  closeDialog
});
</script>

<style scoped>
.form-item {
  display: flex;
  align-items: center; /* 确保删除图标垂直居中 */
}

.delete-icon {
  margin-left: 10px;
  cursor: pointer;
  color: #ff4d4f;
  vertical-align: middle; /* 确保删除图标垂直居中 */
}

.table-header {
  display: flex;
  margin-bottom: 10px;
  font-weight: bold;
}

.table-header span {
  flex: 1;
  padding: 0 5px;
}

.table-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-row el-input {
  flex: 1;
  margin: 0 5px;
}
.table-row .el-form-item {
  margin-bottom: 5px;
}

.required {
  color: #ff4d4f;
}

.delete-icon {
  margin-left: 10px;
  cursor: pointer;
  color: #ff4d4f;
  vertical-align: middle;
}
</style>
